<div class="modal-header">
    <h4 class="modal-title" id="myModalLabel">Crop Image</h4>
</div>
<div class="modal-body" ng-init="$ctrl.init()">
    <div class="panel panel-default">
        <div class="panel-body mb-4">
            <div class="input-group mb-3 hidden">
                <div class="input-group-prepend">
                    <span class="input-group-text">URL {{$ctrl.originW}}</span>
                </div>
                <input type="text" onclick="this.select()" ng-model="$ctrl.srcUrl" class="form-control hidden"
                    placeholder="https://your-image-url..." ng-change="$ctrl.loadFromUrl()" />
            </div>
            <div class="input-group">
                <div class="custom-file">
                    <input id="{{$ctrl.id}}" accept="image/*" type="file" name="pic-{{$ctrl.id}}"
                        data-files="file.files" ngf-select="$ctrl.selectFile($files)" class="hidden" />
                    <label class="custom-file-label" for="{{$ctrl.id}}">Upload file...</label>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12" ng-if="$ctrl.options && $ctrl.cropped.source">
                <croppie ng-if="$ctrl.cropped.source" src="$ctrl.cropped.source" ng-model="$ctrl.cropped.image"
                    boundary-w="$ctrl.options.boundary.width" boundary-h="$ctrl.options.boundary.height"
                    viewport-w="$ctrl.options.viewport.width" viewport-h="$ctrl.options.viewport.height"
                    output-w="$ctrl.options.output.width" output-h="$ctrl.options.output.height"
                    on-update="$ctrl.combineImage()" options="$ctrl.options"></croppie>
            </div>
        </div>
    </div>
</div>
<div class="modal-footer">
    <input type="number" ng-model="$ctrl.w" ng-change="$ctrl.loadImageSize()">
    <input type="number" ng-model="$ctrl.h" ng-change="$ctrl.loadImageSize()">
    <button class="btn btn-info" ng-click="$ctrl.origin()">Origin</button>
    <button class="btn btn-success" ng-click="$ctrl.ok()">Save</button>
    <button class="btn btn-default" ng-click="$ctrl.cancel()">Cancel</button>
</div>